<template >



    <a-card title="图文分类管理" :bordered="false">




        <template slot="extra">
            <a-form-model layout="inline" @submit.prevent="searchSubmit">

                <a-form-model-item>
                    <a-button type="danger" @click="openEdit()">新建图文分类</a-button>
                </a-form-model-item>
            </a-form-model>
        </template>


        <!-- 表格开始 -->

            <a-table  v-if="dataSource.length > 0"
                      :columns="columns"
                      :rowKey="record => record.id"
                      :dataSource="dataSource"
                      :pagination="false"
                      :loading="loading"
                      :defaultExpandAllRows="true"
            >
            <!-- 操作插槽 -->
            <template slot="operation" slot-scope="text, record">
                <a @click="openEdit(record)">编辑</a>
                <a-divider type="vertical"/>
                <a-popconfirm :title="`确定要删除【 ${record.name} 】这个图文分类吗?`" @confirm="() => removeRecord(record)">
                    <a>删除</a>
                </a-popconfirm>
            </template>
        </a-table>
        <EditBox v-if="editShow" @closeFun="closeEdit" :editRecord="editRecord"/>
    </a-card>
</template>
<script>
    import {

        articleTypeTable
    } from '../public/colums.js';
    import {
        typeList,
        typeDelete
    } from '../public/http.js';

    export default {
        components: {
            EditBox: () => import('./edit.vue')
        },
        data() {
            return {
                editShow: false, //打开编辑器
                editRecord: {}, //正在编辑的记录
                dataSource: [],
                loading: false, //表格loading
                columns: articleTypeTable, //表头管理
            };
        },
        methods: {

            //1.0 获取表格数据
            getTableList() {
                this.loading = true;

                typeList().then(res => {
                    this.loading = false;
                    if (res.code === 0) {
                        this.dataSource = res.data.result; //表格数据

                    }
                });
            },

            //2.0打开编辑器
            openEdit(obj = {}) {
                this.editRecord = obj;
                this.editShow = true;
            },
            //2.1 关闭编辑器
            closeEdit(e) {
                this.editShow = false;
                if (e.render) {
                    this.getTableList();
                }
            },

            //4.0删除图文分类
            removeRecord(record) {
                this.loading = true;
                typeDelete(record.id).then(res => {
                    this.$exMod.ajaxMessage(res);
                    if (res.code === 0) {
                        this.getTableList();
                    }
                    this.loading = false;
                });
            },
            //数据初始化
            async init() {

                this.getTableList();
            }
        },
        created() {
            this.init();
        }
    };
</script>
